<script setup>
import HotSearch from "@/components/HotSearch.vue"
import {reactive, ref, onMounted, computed} from 'vue'
import {useHomeStore} from '@/stores/home'
import {getBilibiliHotSearch, getDouyinHotSearch, getIqyHotSearch, getWeiboHotSearch} from '@/api/user'
const useStore = useHomeStore()
const tabList = ['微博热搜', '抖音热搜', '哔哩哔哩热搜', '爱奇艺热搜']
const currentTab = ref(0)
const data = reactive({
  hotSearchList: [],
})
const hotSearchListMapper = computed(() => {
  const currentTabValue = tabList[currentTab.value]
  switch (currentTabValue) {
    case '微博热搜':
      return data.hotSearchList
    case '抖音热搜':
      return data.hotSearchList.map(item => ({
        index: item.position,
        title: item.word,
        url: `https://www.douyin.com/search/${encodeURI(item.word)}`,
        hot: item.hot_value,
      }))
    case '哔哩哔哩热搜':
      return data.hotSearchList.map((item, index) => ({
        index: index + 1,
        title: item.title,
        url: item.link,
        hot: item.heat,
      }))
    case '爱奇艺热搜':
      return data.hotSearchList.map(item => ({
        index: item.order,
        title: item.query,
        url: item.url,
        hot: item.search_mark,
      }))
  }
  return []
})
onMounted(() => {
  getWeiboHotSearch().then(res => {
    if (res.code === 20000) {
      data.hotSearchList = res.retData.data
    }
  })
})
const handleTabChange = () => {
  const currentTabValue = tabList[currentTab.value]
  switch (currentTabValue) {
    case '微博热搜':
      getWeiboHotSearch().then(res => {
        if (res.code === 20000) {
          data.hotSearchList = res.retData.data
        }
      })
      break
    case '抖音热搜':
      getDouyinHotSearch().then(res => {
        if (res.code === 20000) {
          data.hotSearchList = res.retData.data.word_list
        }
      })
      break
    case '哔哩哔哩热搜':
      getBilibiliHotSearch().then(res => {
        if (res.code === 20000) {
          data.hotSearchList = res.retData.data
        }
      })
      break
    case '爱奇艺热搜':
      getIqyHotSearch().then(res => {
        if (res.code === 20000) {
          data.hotSearchList = res.retData.data
        }
      })
      break
  }
}
</script>

<template>
  <el-dialog
    v-model="useStore.isShowWeiboHotSearch"
    @contextmenu.stop.prevent :show-close="true"
    center
    width="min(600px, 90%)"
    style="border-radius: 12px"
  >
    <div>
      <van-tabs v-model:active="currentTab" @change="handleTabChange" color="black" shrink="shrink">
        <van-tab :title="item" v-for="item in tabList" />
      </van-tabs>
    </div>
    <HotSearch :data="hotSearchListMapper" style="margin-top: 1rem" />
  </el-dialog>
</template>